<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:replace="inc/header"></header>

<body th:with="menu='exitQuestion'">
<nav th:replace="inc/nav"></nav>

<div class="container-fluid">
  <div class="row">
    <div th:replace="inc/sidebar"></div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <h1 class="page-header">
        	出所问卷调查管理
        <div class="pull-right">
          <a class="btn btn-primary btn-sm" id="btnAdd">新增</a>
        </div>
      </h1>

      <table class="table table-striped">
        <thead>
          <tr>
            <!-- <th>问卷调查类型</th> -->
            <th>问题一</th>
            <th>回答一</th>
            <th>回答二</th>
            <th>回答三</th>
            <th>回答四</th>
            <th style="min-width: 96px;">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr th:each="d : ${questionnaireQuestion}">
            <!-- <td th:text="${d.name}"></td> -->
            <td th:text="${d.question}"></td>
            <td th:text="${d.options[0].content}"></td>
            <td th:text="${d.options[1].content}"></td>
            <td th:text="${d.options[2].content}"></td>
            <td th:text="${d.options[3].content}"></td>
            <td>
              <a class="btn btn-xs btn-primary btnEdit" th:attr="data-id=${d.id}">修改</a>
              <a class="btn btn-xs btn-danger btnDelete" th:attr="data-id=${d.id}">删除</a>
            </td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</div>

<div class="modal fade" id="modalSave" tabindex="-1" role="dialog" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modalTitle">出所问卷调查</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" id="formSave">
          <span id="jsbhStr" th:attr="value=${jsbh}"></span>
          <input style="display: none;" name="jsbh" id="jsbh" value="${jsbh}" th:attr="value=${jsbh}">
          <input style="display: none;" name="titlesId" id="id">
          <div class="form-group">
            <label for="type" class="control-label col-md-3">问卷调查类型</label>
            <div class="col-md-9">
              <select name="questionnaireId" id="questionnaireId" class="form-control" required="">
                <option value="">---请选择---</option>
                <option value="1">设备</option>
                <option value="2">客户端</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="code" class="control-label col-md-3">问题一</label>
            <div class="col-md-9">
              <!-- <input type="text" name="question" id="question" class="form-control" required> -->
              <textarea name="question" id="question" style="width: 100%;border-radius: 5px;resize:none;" rows="3" required></textarea>
            </div>
          </div>
          <div class="form-group">
            <label for="code" class="control-label col-md-3">回答一</label>
            <div class="col-md-9">
              <!-- <input type="text" name="content1" id="content1" class="form-control" required> -->
              <textarea name="content1" id="content1" style="width: 100%;border-radius: 5px;resize:none;" rows="3" required></textarea>
            </div>
          </div>
          <div class="form-group">
            <label for="code" class="control-label col-md-3">回答二</label>
            <div class="col-md-9">
              <!-- <input type="text" name="content2" id="content2" class="form-control" required> -->
              <textarea name="content2" id="content2" style="width: 100%;border-radius: 5px;resize:none;" rows="3" required></textarea>
            </div>
          </div>
          <div class="form-group">
            <label for="code" class="control-label col-md-3">回答三</label>
            <div class="col-md-9">
              <!-- <input type="text" name="content3" id="content3" class="form-control" required> -->
              <textarea name="content3" id="content3" style="width: 100%;border-radius: 5px;resize:none;" rows="3" required></textarea>
            </div>
          </div>
          <div class="form-group">
            <label for="code" class="control-label col-md-3">回答四</label>
            <div class="col-md-9">
              <!-- <input type="text" name="content4" id="content4" class="form-control" required> -->
              <textarea name="content4" id="content4" style="width: 100%;border-radius: 5px;resize:none;" rows="3" required></textarea>
            </div>
          </div>
          <!-- <div class="form-group">
            <label for="name" class="control-label col-md-3">编号</label>
            <div class="col-md-9">
              <input type="text" name="code" id="code" class="form-control" required>
            </div>
          </div> -->

        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">取消</button>
        <button class="btn btn-primary" id="btnSave">保存</button>
      </div>
    </div>
  </div>
</div>

<div th:replace="inc/footer"></div>
<script th:inline="javascript">
  var $modal = $('#modalSave');
  var $modalTitle = $('#modalTitle');
  var $form = $('#formSave');

  $form.validate();

  // 新增
  $('#btnAdd').on('click', function () {
    var jsbhStr = $('#jsbh').attr('value');
    $modalTitle.text('出所问卷调查');
    $modal.find('input[type=text], select').val('');
    $modal.find('input').val('');
    $modal.find('textarea').val('');
    $modal.modal('show');
  $.ajax({
    url:'/questionnaire/findListQuestionnaire?jsbh='+jsbhStr,
    success:function(data){
      $('#questionnaireId').html('<option value="">---请选择---</option>');
      for(var i=0;i<data.length;i++){
        $('#questionnaireId').append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
      }
    }
  });
  });

  // 保存
  $('#btnSave').on('click', function () {
    if (!$form.valid()) return;
    var data = $form.serializeDict();
    $.ajax({
      url: [[${#httpServletRequest.getContextPath()} +'/questionnaire/creatingTitles']],
      data: data,
      method: 'get',
      success: function () {
        alert('保存成功');
        window.location.reload();
      },
      error: function () {
        alert('保存失败');
      }
    })
  });

  // 删除
  $('.btnDelete').on('click', function () {
    var id = $(this).attr('data-id');
    $.ajax({
      url: [[${#httpServletRequest.getContextPath()} +'/questionnaire/deleteTitles']],
      data: {
        titlesId: id
      },
      method: 'get',
      success: function () {
        alert('删除成功');
        window.location.reload();
      },
      error: function () {
        alert('删除失败');
      }
    })
  });

  // 修改
  $('.btnEdit').on('click', function () {
    var jsbhStr = $('#jsbh').attr('value');
  $.ajax({
    url:'/questionnaire/findListQuestionnaire?jsbh='+jsbhStr,
    async:false,
    success:function(data){
      $('#questionnaireId').html('<option value="">---请选择---</option>');
      for(var i=0;i<data.length;i++){
        $('#questionnaireId').append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
      }
    }
  });
    var id = $(this).attr('data-id');
    $.ajax({
      url: [[${#httpServletRequest.getContextPath()} +'/questionnaire/findOneTitles']],
      data: {
        titlesId: id
      },
    async:false,
      success: function (data) {
        console.log(data)
        $form.find('input:not([type=radio]), select').each(function () {
          $(this).val(data[$(this).attr('name')])
        });
        $modalTitle.text('修改出所问卷调查');
        $modal.modal('show');
        $('#id').val(data.id);
        $('#question').val(data.question);
        $('#content1').val(data.options[0].content);
        $('#content2').val(data.options[1].content);
        $('#content3').val(data.options[2].content);
        $('#content4').val(data.options[3].content);
        // $('#questionnaireId').val(data.id);
      },
      error: function () {
        alert('获取出所问卷调查详情失败');
      }
    })
  });


</script>
</body>
</html>
